<!-- 关于作者 -->
<template>
	<view class="about">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发展历程</block>
		</cu-custom>
		<canvas canvas-id="bubble" :style="'width:' + width + 'px;height:' + height + 'px'" class="like-fx"></canvas>
		<like-fx ref="likeFx" :width="width" :height="height"></like-fx>

		<view class="titleZ text-center align-center">
			<text class="text-bold">关于屹信息</text>

		</view>
		<view class="wrap" style="padding-bottom: 60px;">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司5周年</view>
							<view class="u-order-time">2024-03-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司4周年</view>
							<view class="u-order-time">2023-03-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司3周年</view>
							<view class="u-order-time">2022-03-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司2周年</view>
							<view class="u-order-time">2021-03-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司一周年</view>
							<view class="u-order-time">2020-03-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="2">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" src="/static/msg/list-icon.png"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">公司成立</view>
							<view class="u-order-time">2019-3-13</view>
						</view>
						<view class="u-order-desc">
							<u-upload :fileList="fileList2" name="2" uploadIcon="-" :deletable="false"
								:useBeforeRead="true" :disabled="true"></u-upload>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>

	</view>
</template>

<script>
	import LikeFx from '@/components/likeFx/likeFx.vue'
	export default {
		components: {
			LikeFx
		},
		data() {
			return {
				animation_timer: null, // 动画定时器
				width: 375,
				height: 1920,
				fileList2: [{
					url: 'https://img0.baidu.com/it/u=3846695387,1572281966&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
				}, {
					url: 'https://gd-hbimg.huaban.com/32c03991a4b160f7995939e3cbb15635211a0d503e132-YttxNL_fw658'
				}, {
					url: 'https://img2.baidu.com/it/u=2819655934,963197807&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'
				}, {
					url: 'https://img2.baidu.com/it/u=2037909377,464167036&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=499'
				}],
			}
		},
		onLoad() {
			this._startLikeAnimation();
		},
		onShareAppMessage() {
			return {
				title: '快来和我们玩转软件开发吧～',
				path: '/pages/about/about?from=share'
			}
		},
		methods: {
			_startLikeAnimation() {
				this.animation_timer = setInterval(() => {
					this.$refs.likeFx.likeClick()
				}, 300)
			}
		}
	}
</script>

<style scoped>
	.titleZ {
		width: 750rpx;
		font-size: 52rpx;
		margin-top: -60rpx;
	}

	.contentZ {
		width: 650rpx;
		margin: 10rpx auto 0;
		text-align: left;
	}

	.about-bg {
		background-size: cover;
		width: 100vw;
		height: 100vh;
		justify-content: center;
		flex-direction: column;
		color: #fff;
	}

	.edit-fixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.detail-imgs image {
		width: 100%;
		float: left;
		/* height:400rpx; 不定高了*/
		border: 0;
		padding: 0;
		margin: 0
	}

	.share-img {
		position: fixed;
		padding: 10rpx;
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
	}

	.about {
		margin: 0;
		width: 100%;
		height: 100%;
		padding-top: 20%;
		color: #fff;
		background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
		/* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.container {
		width: 100%;
		position: absolute;
		text-align: center;
	}

	.like-fx {
		position: fixed;
		right: 0;
		z-index: 1024;
		pointer-events: none;
		/* background-color: red; */
	}




	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}


	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-time-axis {
		position: relative;
		background: #fff;
		padding: 15px 10px 10px 70px;
	}
</style>